<template>
  <div>
    <p v-if='isReadOnlyPage === true'>{{strValue}}</p>
    <a-radio-group v-else labelInValue  @change="handleChange" v-model="changeValue" :disabled="isDisabled">
      <a-radio-button v-for="(item, index) in options" :key="item + index" :value="item.id">{{item.name}}</a-radio-button>
    </a-radio-group>
  </div>
</template>

<script>
export default {
  name: 'Radiogroup',
  model: {
    prop: 'value',
    event: 'change'
  },
  props: ['value', 'values', 'isReadOnlyPage', 'isDisabled', 'isResume', 'keys'],
  data () {
    return {
      options: [],
      changeValue: ''
    }
  },
  watch: {
    value (ele) {
      if (this.isResume) {
        this.changeValue = ele
      } else {
        this.changeValue = (ele && ele.id) ? ele.id : ele
      }
    }
  },
  computed: {
    strValue () {
      if (this.value) {
        if (this.value.name) {
          return this.value.name
        } else {
          if (this.value.id === 'FULL_TIME') {
            return '全职'
          } else if (this.value.id === 'PART_TIME') {
            return '兼职'
          } else if (this.value.id === 'Y') {
            return '是'
          } else if (this.value.id === 'N') {
            return '否'
          } else {
            return ''
          }
        }
      } else {
        return ''
      }
    }
  },
  mounted () {
    this.options = this.values
  },
  methods: {
    handleChange (e) {
      let val = {}
      this.options.forEach(ele => {
        if (ele.id === e.target.value) {
          val = ele
        }
      })
      if (this.isResume) {
        this.$emit('change', e.target.value)
      } else {
        this.$emit('change', val)
      }
      this.$emit('onBlurFn', true)
    }
  }
}
</script>

<style>

</style>
